<template>
  <div>
    <Row>
    <Card>
      <div class="distance">
        <Button type="success" @click.prevent.stop="addModal()">新增</Button>

        <Button type="info" @click.prevent.stop="updateModal()">编辑</Button>

        <Button type="error" @click.prevent.stop="del()">删除</Button>

        <Button @click.prevent.stop="detailModal()">查看</Button>

      </div>


      <Row>
        <i-col span="5">
          <Card class="my-22-text" style="background-color: #eee;margin-top: 10px;" dis-hover>机构关系</Card>

          <Tree :data="baseData" @on-select-change='open' ref="tree"></Tree>
        </i-col>
        <Col span="19">
        <Table border :columns="columns1" :data="data1" @on-select="select"></Table>
        <Page :total="total" show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
        </Col>
      </Row>


      <Modal
              v-model="showAddOrderModal"
              ok-text="保存"
              title="新建字典"
              width="650"
              @on-ok="save">
        <Form :model="newWord" ref="newWord" label-position="right" :label-width="80">
          <Row>
            <Col span="12">
            <Form-item label="关键字" prop="keyWord">
              <Input v-model="newWord.keyWord"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="属性值" prop="value">
              <Input v-model="newWord.value"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="排序" prop="sort">
              <Input v-model="newWord.sort"></Input>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
              v-model="showUpdateOrderModal"
              ok-text="保存"
              title="编辑字典"
              width="650"
              @on-ok="update">
        <Form :model="updateWord" label-position="right" :label-width="80">
          <Row>
            <Col span="12">
            <Form-item label="关键字">
              <Input v-model="updateWord.keyWord"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="属性值">
              <Input v-model="updateWord.value"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="排序">
              <Input v-model="updateWord.sort"></Input>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
              v-model="showDetailOrderModal"
              title="字典详情"
              width="650">
        <div slot="footer">
          <Button @click="closeModel()">关闭</Button>
        </div>
        <Form :model="updateWord" label-position="right" :label-width="80">
          <Row>
            <Col span="12">
            <Form-item label="关键字">
              <Input v-model="updateWord.keyWord" readonly></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="属性值">
              <Input v-model="updateWord.value" readonly></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="排序">
              <Input v-model="updateWord.sort" readonly></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="创建人">
              <Input v-model="updateWord.createBy" readonly ></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="创建时间">
              <Input v-model="updateWord.createTime" readonly ></Input>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </Card>
    </Row>


  </div>
</template>
<style scoped>

</style>
<script type="text/ecmascript-6">
  //import api from '@/fetch/api';

  export default {
    beforeMount() {

    },
    mounted() {
      this.getTree();
    },
    data() {
      return {
        newWord: {
          keyWord: '',
          value: '',
          sort: '',
        },
        updateWord: {
          keyWord: '',
          value: '',
          sort: '',
          createBy:'',
          createTime:''
        },

        showAddOrderModal: false,
        showUpdateOrderModal: false,
        showDetailOrderModal: false,

        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '关键字',
            key: 'keyWord'
          },
          {
            title: '属性值',
            key: 'value'
          },
          {
            title: '排序',
            key: 'sort'
          },
          {
            title: '创建人',
            key: 'createBy'
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              var date = new Date(params.row.createTime);
              return api.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            }
          }
        ],
        data1: [],
        baseData: [],
       selectedTree: [],
        total: 0,
        value2: '',
        loading: false,
        showTip: false,
        list: {},
        cityList: [
          {
            value: 'all',
            label: '全部'
          },
          {
            value: 'start',
            label: '启用'
          },
          {
            value: 'forbidden',
            label: '停用'
          }
        ],
        model1: '',
        selectedId: '',
        size: 10,
        num: 1,
        selectDataId:'',
        multipleDataId:[]


      }
    },
    methods: {
      addModal() {
        this.showAddOrderModal = true;
      },
      save() {
        let params = {
          pid: this.selectedId,
          keyWord: this.newWord.keyWord,
          value: this.newWord.value,
          sort: this.newWord.sort,
        };
        api.fetchPost(api.path.dictionarySave, params).then((data) => {
          //控制加载条
          console.log(data);

          if (data.code == 10000) {
            this.$emit('hideLoading');
            //this.loading = false;
            //this.selectedTree[0].children.push(data.data.node);
            this.getTree();
            this.$refs['newWord'].resetFields();
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      select(selectData){
        let i='';
        let j='';
        console.log(selectData);
        this.selectDataId = selectData[0].id;
        this.updateWord.keyWord = selectData[0].keyWord;
        this.updateWord.value = selectData[0].value;
        this.updateWord.createBy = selectData[0].createBy;
        var date = new Date(selectData[0].createTime);
        var time = api.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        this.updateWord.createTime = time;
        this.updateWord.sort = selectData[0].sort;
        this.multipleDataId=[];
        for(i=0;i<selectData.length;i++){
          this.multipleDataId.push(selectData[i].id);
        }
        console.log(this.multipleDataId);
      },
      updateModal() {
        this.showUpdateOrderModal = true;
      },
      detailModal() {
        this.showDetailOrderModal = true;
      },
      closeModel(){
        this.showDetailOrderModal = false;
      },
      del(){
        let params = {
         ids:this.multipleDataId
        };
        api.fetchPost(api.path.dictionaryDelete, params).then((data) => {
          //控制加载条
//          console.log(data);
          if (data.code == 10000) {
            this.$Message.success('删除成功');
            this.getTree();
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })

      },
      update() {
        let params = {
          id: this.selectDataId,
          keyWord: this.updateWord.keyWord,
          value: this.updateWord.value,
          sort: this.updateWord.sort,
        };
        api.fetchPost(api.path.dictionaryUpdate, params).then((data) => {
          //控制加载条
          console.log(data);

          if (data.code == 10000) {
            this.$emit('hideLoading');
            this.loading = false;
            //this.selectedTree[0].children.push(data.data.node);
            this.getTree();
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      changePage(num) {
        this.getList(this.selectedId, this.size, num)
      },
      changeSize(size) {
        this.size = size;
        this.getList(this.selectedId, size, this.num)
      },
      getTree() {
        api.fetchPost(api.path.dictionaryTree, {}).then((data) => {
          //控制加载条
//          console.log(data);
          if (data.code == 10000) {
            this.$emit('showLoading');
            this.loading = false;
            this.baseData = data.data;
            //this.selectedTree = this.baseData;
            this.baseData[0].selected = true;
            this.getList(this.baseData[0].id, this.size, this.num);
            this.selectedId = this.baseData[0].id;
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      open(treeData) {
        this.selectedId = treeData[0].id;
        this.selectedTree = treeData;
        this.getList(this.selectedId, this.size, this.num);

      },
      getList(id, size, num) {
        let params = {
          pid: id,
          pageSize: size,
          pageStart: num
        };
        api.fetchPost(api.path.dictionaryList, params).then((data) => {
          //控制加载条
//          console.log(data);
          if (data.code == 10000) {
            this.$emit('hideLoading');
            this.loading = false;
            this.total = data.data.total;
            this.data1 = data.data.data;
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },


    }

  };
</script>
